import * as React from 'react';
import { Button, View, TextInput } from 'react-native';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { HeaderSearchBarRef } from '@react-navigation/elements';

export const SearchBarContext = React.createContext<React.RefObject<HeaderSearchBarRef> | null>(null);

function HomeScreen({ navigation }) {
  const searchRef = React.useContext(SearchBarContext);
  return (
    <View style={{ flex: 1, alignItems: 'center' }}>
      <Button
        title="Ref.focus"
        onPress={() => {
          if (searchRef) {
            if (searchRef.current) {
              searchRef.current.focus();
              console.info('searchRef.focus called')
            }
          }
        }}
      />
      <Button
        title="Ref.blur"
        onPress={() => {
          if (searchRef) {
            if (searchRef.current) {
              searchRef.current.blur();
              console.info('searchRef.blur called')
            }
          }
        }}
      />
      <Button
        title="Ref.setText"
        onPress={() => {
          if (searchRef) {
            if (searchRef.current) {
              searchRef.current.setText('搜索');
              console.info('searchRef.setText called')
            }
          }
        }}
      />
      <Button
        title="Ref.clearText"
        onPress={() => {
          if (searchRef) {
            if (searchRef.current) {
              searchRef.current.clearText();
              console.info('searchRef.clearText called')
            }
          }
        }}
      />
      <Button
        title="Ref.cancelSearch"
        onPress={() => {
          if (searchRef) {
            if (searchRef.current) {
              searchRef.current.cancelSearch();
              console.info('searchRef.cancelSearch called')
            }
          }
        }}
      />

    </View>
  );
}
const Stack = createNativeStackNavigator();

export default function HeaderSearchBarOptionsExamples() {
  const searchRef = React.useRef<HeaderSearchBarRef>(null);
  return (
    <NavigationContainer>
      <SearchBarContext.Provider value={searchRef}>
        <Stack.Navigator
          initialRouteName="Home"
          screenOptions={
            {
              headerTintColor: 'black',
              headerSearchBarOptions: {
                ref: searchRef,
                autoFocus: false,
                inputType: 'text',
                onBlur: (text) => {
                  console.info('searchRef Callback onBlur');
                },
                onChangeText: (text) => {
                  console.info('searchRef Callback onChangeText');
                },
                onSubmitEditing: (text) => {
                  console.info('searchRef Callback onSubmitEditing');
                },
                onOpen: () => {
                  console.info('searchRef Callback Callback onOpen');
                },
                onClose: () => {
                  console.info('searchRef Callback onClose');
                },
                onFocus: () => {
                  console.info('searchRef Callback onFocus');
                },
                placeholder: '未输入文本'
              }
            }
          }
        >
          <Stack.Screen name="Home" component={HomeScreen} />
        </Stack.Navigator>
      </SearchBarContext.Provider>
    </NavigationContainer >
  );
}